import './CommonLoading.scss'
import qs from 'qs'
import { useRequest } from 'alova'
import PropTypes from 'prop-types'
import { useMount } from "ahooks"
import { useNavigate } from 'react-router-dom'
import { lazy, Suspense } from 'react'

import { Http } from '../../Api'
import { AddIndexdDB } from '../../Utils/IndexedDB'

const LoadSvg = lazy(() => import('../../Views/LoadSvg'))


const CommonLoading = ({ Off, data, ModalEvent }) => {
    CommonLoading.propTypes = { data: PropTypes.object, Off: PropTypes.func, ModalEvent: PropTypes.object }
    const Navigate = useNavigate()
    const { send } = useRequest(data => Http({ url: 'posToken', params: data }), { immediate: false })

    const SignUp = async () => {
        try {
            const token = await send(qs.stringify(data))
            const { token_type, access_token } = token
            await AddIndexdDB('token', `${token_type} ${access_token}`)
            Navigate('Common')
        } catch (err) {
            ModalEvent.emit(err.message)
            Off()
        }

    }
    useMount(() => SignUp())
    return (
        <div className="CommonLoading">
            <Suspense>
                <LoadSvg style={{ '--background': 'transparent', '--stroke': '#212121', height: '100%' }} />
                <div className="text">正在努力登录中...</div>
            </Suspense>
        </div>
    )
}
export default CommonLoading;